<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

        <div id="root">

                <table cellspacing="10px">
                    <tr>
                        <td align="right">生日:</td>
                        <td>
                            <select  v-on:change="changeday" v-model="selecty">
                                <option v-for="(item, index) in listy" v-bind:key="index">{{item}}</option>
                            </select>年
                            <select  v-on:change="changeday" v-model="selectm">
                                <option v-for="(item, index) in listm" v-bind:key="index">{{item}}</option>
                            </select>月
                            <select>
                                <option v-for="(item, index) in listd" v-bind:key="index">{{item}}</option>
                            </select>日
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <img v-bind:src="imgurl" id="img1"> &nbsp;  &nbsp; <span v-on:click="changeimg">看不清,换一张</span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">验证码:</td>
                        <td><input v-model="inputstr"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                           <img src="btn_reg.gif" v-on:click="getcode">
                        </td>
                    </tr>
                </table>
        </div>

        <script>
            new Vue({
                el: "#root",
                data: {
                    listy: [],
                    listm: [],
                    listd: [],
                    selecty: "2023",
                    selectm: "1",
                    imgurl: "verycode.gif",
                    imgList: ["1111.png", "1234.png", "2222.png", "3333.png", "4567.png"],
                    imgCode: ["1111", "1234", "2222", "3333", "4567"],
                    tag: -1,
                    inputstr: ""

                },
                created: function () {
                    for (var i = 2023; i >=1949  ; i--) {
                        this.listy.push(i);
                    }
                    for (var i = 1; i <= 12; i++) {
                        this.listm.push(i)
                    }
                    for (var i = 1; i <= 31; i++) {
                        this.listd.push(i)
                    }
                },
                methods: {
                    changeday: function () {
                        console.log(this.selecty)
                        console.log(this.selectm)

                        this.listd = [];

                        for (var i = 1; i <= 10; i++) {
                            this.listd.push(i)
                        }

                    },
                    changeimg: function () {
                        var index = Math.floor(Math.random() * this.imgList.length)

                        while (index == this.tag){
                            index = Math.floor(Math.random() * this.imgList.length)
                        }

                        this.imgurl = this.imgList[index]

                        this.tag = index;
                    },
                    getcode: function () {

                        if (this.tag == -1){
                            if (this.inputstr.toUpperCase() == "BNKSU"){
                                alert("验证码正确")
                            } else {
                                alert("验证码错误")
                            }
                            return
                        }

                        if ( this.inputstr == this.imgCode[this.tag]){
                            alert("验证码正确")
                        } else {
                            alert("验证码错误")
                        }
                    }
                }
            })

        </script>

</body>
</html>
